<template>
  <div class="app-container">
    <!-- <div class="d-flex justify-space-between align-center">
      <span>{{ pageType === 'add' ? '新增门店' : '编辑门店' }}</span>
      <el-button type="primary" plain @click="$router.go(-1)">返回</el-button>
    </div> -->
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-form-item label="门店名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入门店名称" />
      </el-form-item>
      <el-form-item label="门店地址：" prop="adress">
        <el-input v-model="form.adress" placeholder="请输入门店地址" />
      </el-form-item>
      <el-form-item label="城市：:" prop="city">
        <el-select v-model="form.city" style="width: 320px" clearable placeholder="请选择">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="每日需求量：" prop="count">
        <el-input v-model="form.count" placeholder="请输入每日需求量" />
      </el-form-item>
      <el-form-item label="状态：" prop="state">
        <el-select v-model="form.state" style="width: 320px" clearable placeholder="请选择">
          <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="门店类型：" prop="type">
        <el-select v-model="form.type" style="width: 320px" clearable placeholder="请选择">
          <el-option v-for="item in storeTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addShop, updateShop } from "@/api/shop/index";
import { mapState } from "vuex";
import { broadcast } from "@/utils/util";
import { GET_SHOP_INFO } from "@/http/public";
export default {
  name: "SotreCreate",
  props: {
    status: {
      type: String,
      default: "add",
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        name: "",
        adress: "",
        state: "",
        count: "",
        city: "",
        id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
        adress: [
          { required: true, message: "请输入门店地址", trigger: "blur" },
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
        count: [
          { required: true, message: "请输入每日需求数量", trigger: "blur" },
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        // type: [
        //   { required: true, message: "请选择门店类型", trigger: "change" },
        // ],
      },
      stateList: [
        {
          value: 0,
          label: "休息中",
        },
        {
          value: 1,
          label: "营业中",
        },
      ],
      storeTypeList: [
        { value: 1, label: "前端门店" },
        { value: 2, label: "后端门店" },
      ],
    };
  },
  computed: {
    pageType() {
      return this.status;
    },
    ...mapState("app", ["cityList"]),
  },
  created() {
    if (this.pageType !== "add") {
      let m = this.info;
      console.log(m);
      this.getInfo(m.id);
    }
    console.log(this.$route);
  },
  methods: {
    async onSave() {
      try {
        await this.$refs["form"].validate();
        this.pageType === "add" ? this.addShop() : this.updateShop();
      } catch (error) {}
    },
    async addShop() {
      const { code } = await addShop(this.form);
      if (code === 200) {
        this.$message.success("新增门店成功");
        //this.$router.go(-1);
        broadcast("close.user.store");
        broadcast("store.add.succes");
      }
    },
    async updateShop() {
      const { code } = await updateShop(this.form);
      if (code === 200) {
        this.$message.success("编辑门店成功");
        //this.$router.go(-1);
        broadcast("close.user.store");
        broadcast("store.add.succes");
      }
    },

    // 获取门店详情
    getInfo(id) {
      let _this = this;
      GET_SHOP_INFO({ id: id }).then((res) => {
        let obj = res.data || {};
        Object.keys(_this.form).forEach((key) => {
          _this.form[key] = obj[key];
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 320px;
}
</style>
